<template>
  <div class="container">
    <div class="container--item__tel">
      <input type="tel" placeholder="请输入11位手机号"
             @keydown="tellShow"
             @focus="tellFocusShow"
             @blur="tellVanish"
             v-model="tell" id="tel">
      <img src="../assets/register/error.png"
           class="container--img__error"
           @click="tellClick"
           v-show="tellDltBoole" alt="#">
    </div>
    <div class="container--item__tel">
      <input type="password" placeholder="请输入6-12位密码"
             @keydown="passwordShow"
             @focus="passwordFocusShow"
             @blur="passwordVanish"
             v-model="password" id="password">
      <img src="../assets/register/error.png"
           class="container--img__error"
           @click="pasClick"
           v-show="passwordDltBoole" alt="#">
    </div>
    <span class="container--item__text">已有账户，
      <a @click="resetPassword" class="container--text">忘记密码？</a>
    </span>
    <div class="container--item__btn" @click="login">登录</div>
    <div class="loading" v-if="loadingBoole">
      <div class="all">
        <div class="circle-opactiy">
          <div class="child circle1"></div>
          <div class="child circle2"></div>
          <div class="child circle3"></div>
          <div class="child circle4"></div>
          <div class="child circle5"></div>
          <div class="child circle6"></div>
          <div class="child circle7"></div>
          <div class="child circle8"></div>
          <div class="child circle9"></div>
          <div class="child circle10"></div>
          <div class="child circle11"></div>
          <div class="child circle12"></div>
        </div>
      </div>
      <span class="container--loading__text">正在为您拼命加载中~</span>
    </div>
  </div>
</template>

<script>
import { Throttle } from '../publicFunction';

export default {
  name: 'login',
  data() {
    return {
      tell: '',
      password: '',
      tellDltBoole: false,
      passwordDltBoole: false,
      loadingBoole: false,
    };
  },
  methods: {
    tellShow() {
      this.tellDltBoole = true;
    },
    passwordShow() {
      this.passwordDltBoole = true;
    },
    /* eslint-disable */
    tellFocusShow() {
      this.tell.length > 0 ? this.tellDltBoole = true : '';
    },
    passwordFocusShow() {
      this.password.length > 0 ? this.passwordDltBoole = true : '';
    },
    tellVanish() {
      this.tellDltBoole = false;
    },
    passwordVanish() {
      this.passwordDltBoole = false;
    },
    tellClick() {
      this.tell = '';
    },
    pasClick() {
      this.password = '';
    },
    resetPassword() {
      this.$router.push({ name: 'resetPassword' });
    },
    login: Throttle(function () {
      this.$api.login({
        phoneNumber: this.tell,
        password: this.password,
      })
        .then((data) => {
          console.log(data);
          if (data.data.code === 3001) {
            this.loadingBoole = true;
            setTimeout(() => {
              this.loadingBoole = false;
              this.$router.push({
                name: 'personal',
                params: { data: data.data.data.phoneNumber },
              });
              setTimeout(() => {
                this.$popUp({
                  message: data.data.msg,
                });
              }, 500);
            }, 500);
          } else {
            this.$popUp({
              message: data.data.msg,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },500)
  },
};
</script>

<style scoped lang="scss">
  *{
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  .container{
    position: relative;
    .container--item__tel{
      position: relative;
      left: 8%;
      right: 8%;
      height: 1.3333333rem;
      width: 84%;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      .container--img__error{
        width: .4rem;
        height: .4rem;
        position: absolute;
        right: .613333333rem;
        top: .46666665rem;
      }
      #tel,#password{
        margin-left: .45333333rem;
        outline:none;
        border-width:0;
        height: 95%;
        font-size: .34666666rem;
        width: 60%;
      }
    }
    .container--item__text{
      position: absolute;
      right: 8%;
      top: 3rem;
      font-size: .32rem;
      .container--text{
        font-size: .32rem;
        color: #609aeb;
        text-decoration: none;
      }
    }
    .container--item__btn{
      position: absolute;
      left: 1.28rem;
      right: 1.28rem;
      top: 4.426666667rem;
      line-height: 1.066666rem;
      text-align: center;
      border-radius: 30px;
      background-color: #3c9dfc;
      color: #fff;
      font-size: .4266666rem;
    }
    .container--item__btn:active{
      background-color: #338fe3;
    }
  }
  .loading{
    height: 2.6rem;
    width: 4.733333rem;
    background-color: #e8e8e8;
    border-radius: 4px;
    margin: auto;
    position: relative;
    top: -1.5rem;
    .container--loading__text{
      text-align: center;
      font-size: .4rem;
      display: block;
      color: #464646;
      position: relative;
      left: 0;
      right: 0;
      top: .75rem;
      bottom: 0;
      margin: auto;
    }
    .all{
      flex: 1 1 25%;
      .circle-opactiy{
        width: (75/75) + rem;
        height: (75/75) + rem;
        margin: auto;
        position: relative;
      }
      .circle-opactiy .child{
        position: absolute;
        left: 0;
        top: .5rem;
        width: 100%;
        height: 100%;
      }
      .circle-opactiy .child::before{
        content: "";
        display: block;
        margin:  0 auto;
        width: 15%;
        height: 15%;
        background-color: #818181;
        border-radius: 100%;
        animation: circle-opacity 1.2s infinite ease-in-out;
      }
      .circle-opactiy .circle2{
        transform: rotate(30deg);
      }
      .circle-opactiy .circle2::before{
        animation-delay: -1.1s;
      }
      .circle-opactiy .circle3{
        transform: rotate(60deg);
      }
      .circle-opactiy .circle3::before{
        animation-delay: -1s;
      }
      .circle-opactiy .circle4{
        transform: rotate(90deg);
      }
      .circle-opactiy .circle4::before{
        animation-delay: -.9s;
      }
      .circle-opactiy .circle5{
        transform: rotate(120deg);
      }
      .circle-opactiy .circle5::before{
        animation-delay: -.8s;
      }
      .circle-opactiy .circle6{
        transform: rotate(150deg);
      }
      .circle-opactiy .circle6::before{
        animation-delay: -.7s;
      }
      .circle-opactiy .circle7{
        transform: rotate(180deg);
      }
      .circle-opactiy .circle7::before{
        animation-delay: -.6s;
      }
      .circle-opactiy .circle8{
        transform: rotate(210deg);
      }
      .circle-opactiy .circle8::before{
        animation-delay: -.5s;
      }
      .circle-opactiy .circle9{
        transform: rotate(240deg);
      }
      .circle-opactiy .circle9::before{
        animation-delay: -.4s;
      }
      .circle-opactiy .circle10{
        transform: rotate(270deg);
      }
      .circle-opactiy .circle10::before{
        animation-delay: -.3s;
      }
      .circle-opactiy .circle11{
        transform: rotate(300deg);
      }
      .circle-opactiy .circle11::before{
        animation-delay: -.2s;
      }
      .circle-opactiy .circle12{
        transform: rotate(330deg);
      }
      .circle-opactiy .circle12::before{
        animation-delay: -.1s;
      }
      @keyframes circle-opacity {
        0%{
          opacity: 0;
        }
        40%{
          opacity: 1;
        }
        80%{
          opacity: 0;
        }
        100%{
          opacity: 0;
        }
      }
    }
  }


</style>
